<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-13 19:09:31
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-20 13:23:35
--> 
<template>
  <div class="head-container">
    <!-- 搜索 -->
    <!--    <el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>-->
    <!--    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>-->
    <!-- 新增 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="$refs.form.dialog = true">新增
      </el-button>
      <eForm ref="form" :roles="roles" :is-add="true"/>
    </div>
    <div style="display: inline-block;">
      <el-button size="mini"
                 class="filter-item"
                 type="primary"
                 icon="el-icon-sort"
                 @click="ClickHandleSort"
      > 确认排序
      </el-button>
    </div>
    <!-- 导出 -->
  </div>
</template>

<script>
  import checkPermission from '@/utils/permission' // 权限判断函数
  import { parseTime } from '@/utils/index'
  import eForm from './form'
  // 查询条件
  export default {
    components: { eForm },
    props: {
      roles: {
        type: Array,
        required: true,
      },
      query: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        downloadLoading: false,
      }
    },
    methods: {
      checkPermission,
      // 去查询
      toQuery() {
        this.$parent.page = 0
        this.$parent.init()
      },
      // 导出
      download() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['ID', '用户名', '邮箱', '头像地址', '状态', '注册日期', '最后修改密码日期']
          const filterVal = ['id', 'username', 'email', 'avatar', 'enabled', 'createTime', 'lastPasswordResetTime']
          const data = this.formatJson(filterVal, this.$parent.data)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'table-list',
          })
          this.downloadLoading = false
        })
      },
      // 数据转换
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'createTime' || j === 'lastPasswordResetTime') {
            return parseTime(v[j])
          } else if (j === 'enabled') {
            return parseTime(v[j]) ? '启用' : '禁用'
          } else {
            return v[j]
          }
        }))
      },
      ClickHandleSort() {
        let arr = [];
        this.$parent.data.forEach((item,index)=>{
            arr.push({
              id:item.id,
              sort:item.sort
            })
        })
        let param = {
          sort_info:JSON.stringify(arr)
        }
        this.$confirm('是否提交当前排序', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
        }).then(() => {
          this.$api.permission.visualDraggableConfig.setTabSort({
            data:param
          }).then(result => {
            console.log(result);
            if(result.code === 200){
              this.$message({
                type: 'success',
                message: '提交成功',
              })
            }
          }).catch(error=>{
            this.$message({
              type: 'warning',
              message: '提交失败',
            })
          })
        }).catch(action => {
          // this.$message({
          //   type: "info",
          //   message: action === "cancel" ? "已取消排序" : "放弃当前排序",
          // })
        })
      },
    },
  }
</script>
